<!--
 * @Descripttion: 进货单详情查看
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-12 14:49:49
 -->
<template>
  <div class="bill_container">
    <affix>
      <div class="clearfix paddingLR20">
        <div class="oper-button btn-group fl">
          <el-button type="default" @click="btnPrint">打印</el-button>
        </div>
        <div class="oper-button btn-group fr">
          <el-button type="default" @click="btnJump2List">历史单据</el-button>
        </div>
      </div>
    </affix>
    <el-main>
      <el-card shadow="never">
        <div slot="header" class="header clearfix">
          <div class="clearfix index_container form font12 paddingT20">
            <div class="fr">
              <span>单据编号 : {{ dataObj.billNo }}</span>
            </div>
          </div>
          <div class="index_container title">
            <h1> 商品盘点单 </h1>
          </div>
        </div>
        <div class="clearfix font12 paddingB10">
          <div class="fl">
            <el-radio-group v-model="dataObj.changeType">
              <el-radio :label="1">全部商品</el-radio>
              <el-radio :label="2">盘亏商品</el-radio>
              <el-radio :label="3">盘盈商品</el-radio>
            </el-radio-group>
          </div>
          <div class="fr">
            <span>经手人 : {{ dataObj.handUserName }}</span>
            <span class="margin-l10">业务日期 : {{ dataObj.businessTime }}</span>
          </div>
        </div>
        <vxe-grid
          ref="table"
          class="grid"
          border
          resizable
          highlight-hover-row
          :loading="tableLoading.table"
          :columns="columnsData"
          :data="detailData"
        />
        <div class="bottom">
          <table class="table" border="1" cellspacing="0" cellpadding="0">
            <tr>
              <td colspan="2" style="padding:1;" @mouseenter="onTdMouseEnter" @mouseleave="onTdMouseLeave">
                <table class="wfull" border="0" cellspacing="0" cellpadding="0">
                  <tr class="lastrow">
                    <td width="100">
                      备 注:
                    </td>
                    <td class="lastCol">
                      {{ dataObj.remarks }}
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </div>
      </el-card>
    </el-main>
  </div>
</template>

<script>
import { oftenuse } from '@/libs/mixins'
import { amount } from '@/libs/tools.js'
import { update, columns } from './mixins'
import Affix from '@/components/Affix'

export default {
  name: 'CheckstockView',
  components: { Affix },
  filters: {
    goodAmount: function(row) {
      return amount(row.price).multiply(row.num).format()
    }
  },
  mixins: [update, columns, oftenuse],
  props: {
    billId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
    }
  },
  computed: {
    'detailData': function() {
      const detailData = this.getTableData('table')
      const changeType = this.dataObj.changeType
      if (!changeType) return []
      if (changeType === 1) return detailData
      if (changeType === 2) {
        return detailData.filter(item => { return item.realQty < item.bookQty })
      }
      return detailData.filter(item => { return item.realQty > item.bookQty })
    },
    'columnsData': function() {
      const changeType = this.dataObj.changeType
      if (!changeType) return []
      const colsMap = {
        1: this.columnsAllData,
        2: this.columnsLossData,
        3: this.columnsProfitData
      }
      return colsMap[changeType]
    }
  },
  watch: {
  },
  mounted() {
    this.goodsSelectComp = this.$refs.GoodsSelect
  },
  created() {
    this.initViewData()
    this.$set(this.dataObj, 'changeType', 1)
  },
  methods: {
    btnPrint() {
      const billId = this.billId
      const billCat = 'inventory'
      const title = '盘点单'
      window.open(`/#/print?billId=${billId}&billCat=${billCat}&title=${title}`, '_blank')
    },
    btnJump2List() {
      this.$router.push({
        name: 'CheckstockList'
      })
    },
    initData() {
      this.initViewData()
    },
    // on
    onTdMouseEnter(e) {
      const target = e.target
      target.className = 'bg-gay'
    },
    onTdMouseLeave(e) {
      const target = e.target
      target.className = ''
    }
  }
}
</script>
